@import '../../../../app/mixins.css';

:root {
  --menu-item-width: 72px;
}

.wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: auto;
}

.item {
  border-right: 1px solid var(--color-platinum);
  box-sizing: border-box;
  cursor: pointer;
  height: 102%;
  padding: 0 24px;
  text-decoration: none;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  border-bottom-width: 2px;
  border-bottom-color: transparent;
  border-bottom-style: solid;

  &::before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
  }

  &:last-child {
    border-right: 0 none;
  }
}

.label {
  @mixin headingSmall;

  color: var(--color-ultramarine-blue);
  font-weight: var(--font-weight-normal);
  line-height: 19px;
  padding-left: 10px;
  display: none;
}

.icon {
  vertical-align: middle;
}

.disabled {
  pointer-events: none;
  cursor: default;

  & img {
    opacity: 0.5;
  }
}

.selected {
  background: var(--color-white);
  border-bottom-color: var(--color-ultramarine-blue);
  max-width: 160px;

  & .label {
    display: inline-block;
  }
}

@media (--medium-viewport) {
  .wrapper {
    min-width: 120px;
  }

  .selected {
    & .label {
      display: none;
    }
  }
}
